<template>
  <div class="page">
    <c-title :hide="false" text="易货大厅"></c-title>
    <div>
      <van-search v-model="searvalue" placeholder="请输入搜索关键词" />
    </div>
    <div class="content">
      <div class="list" v-for="(item, index) in flist" :key="index" @click="golist(item.id)">
        <div class="top">
          <img :src="item.thumb" alt="" />
        </div>
        <div class="name">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="imgclass">
      <img src="https://app.hefutang.com.cn/static/upload/images/1/2022/11/8d055eb0b4010770841e9bc5659eb8c1.jpg" alt="" />
    </div>

    <div class="title">易货商品</div>
    <div class="shopcontent">
      <div class="shoplist" v-for="(item, index) in shoplist" :key="index" @click="goyhdetail(item.id)">
        <div class="top">
          <img :src="item.goods_pic" alt="" />
        </div>
        <div class="bot">
          <div class="name">
            {{ item.name }}
          </div>
          <div class="desc" v-html="item.goods_desc">
            <!-- {{  }} -->
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <van-button round icon="cart-o" type="primary" @click="lkorderlist">我的易货订单</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flist: [],
      shoplist: [],
      searvalue:null,
    };
  },
  activated() {
    this.getlist();
    this.getshoplist();
  },
  methods: {
    goyhdetail(id) {
      this.$router.push(this.fun.getUrl("newyhdetail", {}, { id }));
    },
    getshoplist() {
      $http
        .post("plugin.store-yihuo.frontend.store.yihuo.get-goods-list", {})
        .then(response => {
          console.log(response);
          if (response.result === 1) {
            this.shoplist = response.data.list;
            console.log(this.shoplist)
          } else {
            Toast(response.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    golist(id) {
      this.$router.push(this.fun.getUrl("fllist", {}, { id }));
    },
    getlist() {
      $http
        .post("plugin.store-yihuo.frontend.store.yihuo.getstoreclass", {})
        .then(response => {
          console.log(response);
          if (response.result === 1) {
            this.flist = response.data.list;
          } else {
            Toast(response.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    lkorderlist() {
      this.$router.push(this.fun.getUrl("order"));
    }
  }
};
</script>

<style scoped lang="scss">
.page {
  .title {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    // font-weight: 600;
    // color: #fb4413;
    font-size: 1rem;
  }
  .shopcontent {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
  flex-wrap: wrap;
    .shoplist {
      width: 48%;
      margin-bottom: 0.5rem;
      background-color: #fff;
      .bot {
        text-align: left;
        padding: 0.5rem;
        height: 5rem;
        overflow: hidden;
        .name {
          font-weight: 600;
          margin-bottom: 0.5rem;
          font-size: 1rem;
          margin: 0rem 0rem 0.5rem 0rem;
        }
        .desc{
          text-align: right;
          font-size: 0.5rem;
          margin-right: 1rem;
        }
      }
      .top {
        img {
          width: 100%;
          height: 8rem;
          align-content: center;
          // margin-top: 1rem;
        }
      }
    }
  }
  .content:after {
    content: "";
    width: 33%;
  }
  .content {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    text-align: center;
    flex-wrap: wrap;
    background-color: #fff;
    border-radius: 1rem;
    margin: 1rem 0rem;
    img {
      width: 100%;
    }
    .list {
      width: 33%;
      margin: 0.1rem 0rem;
      border-radius: 1rem;
      .name {
        // font-weight: 600;
      }
      .top {
        img {
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
        }
      }
    }
  }
  .bottom {
    .van-button {
      position: fixed;
      right: 0rem;
      bottom: 2rem;
    }
  }
  .imgclass {
    img {
      width: 100%;
      border-radius: 1rem;
    }
  }
}
</style>